import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { MailOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";
// import { Provider } from "react-redux";
// import store from "./utils/store";

type MenuItem = Required<MenuProps>["items"][number];

const items: MenuItem[] = [
  {
    label: "components",
    key: "components",
    icon: <MailOutlined />,
  },
  {
    label: "management",
    key: "dev",
    icon: <MailOutlined />,
  },
];

function App() {
  const [current, setCurrent] = useState("components");
  const to = useNavigate();
  const location = useLocation();

  useEffect(() => {
    const subCom = location.pathname.split("/")[1];

    const res = items.find((val) => val?.key === subCom);
    if (res) {
      setCurrent(subCom);
    } else {
      setCurrent(items[0]?.key as string);
    }
  }, [location]);

  const onClick: MenuProps["onClick"] = (e) => {
    setCurrent(e.key);
    to(e.key);
  };
  return (
    <>
      {/* <Provider store={store}> */}
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={items}
      />
      <div>
        <Outlet />
      </div>
      {/* </Provider> */}
    </>
  );
}

export default App;
